<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Camera Selection</title>
</head>
<body>
<video id="videoElement" width="400" height="300" autoplay></video>

<script>
  navigator.mediaDevices.enumerateDevices()
    .then(devices => {
      const videoDevices = devices.filter(device => device.kind === 'videoinput');
      let constraints;
      if (videoDevices.length > 0) {
        constraints = { deviceId: { exact: videoDevices[0].deviceId } };
      } else {
        console.error('No video input devices found.');
        constraints = { video: true };
      }

      navigator.mediaDevices.getUserMedia({ video: constraints })
        .then(stream => {
          const videoElement = document.getElementById('videoElement');
          videoElement.srcObject = stream;
        })
        .catch(err => {
          // console.error('Error accessing the camera:', err);
          // 提示用户或提供备用方案
          navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
              const videoElement = document.getElementById('videoElement');
              videoElement.srcObject = stream;
            })
            .catch(err => {
              console.error('Error accessing the camera:', err);
            });
        });
    })
    .catch(err => {
      console.error('Error enumerating devices:', err);
    });
</script>

</body>
</html>
